/*
 * @Description: 车辆列表单个item
 * @Author: ziwei.ma
 * @Date: 2019-07-15 13:46:09
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-07-15 16:35:44
 */

<template>
  <div
    class="bus-list-warpper flex-h flex-hsb flex-vc"
    @click="goToBusDetail(busID)"
  >
    <!-- item左侧车辆信息 -->
    <div class="bus-detail-warpper flex-h flex-vc">
      <img
        :src="busIcon"
        class="bus-icon"
      >
      <div class="flex-v">
        <span class="fontsize32 bus-name">{{busName}}</span>
        <span
          class="fontsize28"
          style="color:#666666"
        >座位数：{{seats}}座</span>
      </div>
    </div>

    <!-- item右侧箭头 -->
    <div
      class="icon iconfont icon-rightangel baseColorInvalid fontsize40"
      style="font-weight:700"
    ></div>
  </div>
</template>

<script>
export default {
  props: [
    'busID',
    'busIcon',
    'busName',
    'seats'
  ],
  methods: {
    goToBusDetail(busID) {
      this.$AppRouterUtils.open('bcBusDetail.html?_tv=true&busID=' + this.busID)
    }
  }
}
</script>

<style scoped>
.bus-list-warpper {
  width: 658px;
  border-radius: 8px;
  margin: 32px;
  overflow: hidden;
  box-shadow: 0 0 20px #e8e9ea;
  background-color: #fff;
  height: 116px;
  padding: 14px;
}
.bus-icon {
  width: 180px;
  height: 76px;
  margin-right: 32px;
  border-radius: 4px;
  overflow: hidden;
}
.bus-name {
  width: 390px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
</style>
